<template>
  <div>
    <div class="jingyuanfnegcais">
      <!-- 头部按钮 -->
      <div v-show="isShows">
        <div class="header">
          <button @click="addlunbo">新增轮播图</button>
        </div>
        <el-table
          :data="imageall"
          tooltip-effect="dark"
          style="width: 100%"
          @select="tabid(nUid)"
        >
          <el-table-column
            prop="sPicUrl"
            label="轮播图"
            width="360px"
            align="center"
          >
            <template slot-scope="scope">
              <img width="220px" height="120px" :src="scope.row.sPicUrl"  alt />
            </template>
          </el-table-column>
          <el-table-column
            prop="nOrder"
            label="顺序"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column label="操作" show-overflow-tooltip align="center" width="554px">
            <template slot-scope="scope">
              <span class="bj" @click="editor(scope.row)">编辑</span>
              <span>|</span>
              <span class="bj" @click.prevent="dialogVisible = true">删除</span>
              <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                <span>此操作将永久删除该文件, 是否继续?</span>
                <span slot="footer" class="dialog-footer">
                  <button class="button1" @click="dialogVisible = false">
                    取 消
                  </button>
                  <button
                    class="button2"
                    type="primary"
                    @click="deletepicture(scope.row)"
                  >
                    确 定
                  </button>
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 返回 -->
      <!-- 新增 -->
      <div class="header-line" v-show="isfhs">
        <div class="fan">
          <el-row>
            <el-button type="primary" class="xinzeng" @click="lunbofanhui"
              >返回</el-button
            >
          </el-row>
          <div class="xztp">
            <form action class="xiugai">
              <div class="xztp1">
                <span>新增图片</span>
              </div>
              <div class="tupian">
                <span>图片</span>
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-change="changeFile"
                  :on-remove="handleRemove"
                  :auto-upload="true"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <span class="tjtp">添加图片</span>
                </el-upload>
                <span class="tupian1">
                  轮播图: 建议尺寸：
                  <i>220*120</i>，支持png、jpg、jpeg格式
                </span>
              </div>
              <div class="lianjie">
                <span>顺序</span>

                <input type="text" name id v-model="shunxu" />
              </div>
              <div class="anniu">
                <el-button type="primary" @click="PostAddpicture" class="zhuyao"
                  >确定</el-button
                >
                <el-button type="info" plain class="quxiao" @click="prev()"
                  >取消</el-button
                >
              </div>
            </form>
          </div>
        </div>
      </div>
      <!-- 编辑 -->
      <div class="header-line" v-show="isBianji">
        <div class="fan">
          <el-row>
            <el-button type="primary" class="xinzeng" @click="lunbofanhui"
              >返回</el-button
            >
          </el-row>
          <div class="xztp">
            <form action class="xiugai">
              <div class="xztp1">
                <span>修改图片</span>
              </div>
              <div class="tupian">
                <span>图片</span>

                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-change="changeFile"
                  :on-remove="handleRemove"
                  :auto-upload="false"
                >
                  <img
                    :src="sPicUrl"
                    width="220px"
                    height="120px"
                    class="avatar"
                  />
                  <i slot="default" class="el-icon-plus"></i>
                  <span class="tjtp">添加图片</span>
                </el-upload>
                <span class="tupian1">
                  轮播图: 建议尺寸：
                  <i>220*120</i>，支持png、jpg、jpeg格式
                </span>
              </div>
              <div class="lianjie">
                <span>顺序</span>
                <input type="text" name id v-model="nOrder" />
              </div>
              <div class="anniu">
                <el-button type="primary" @click="UpdatePicture" class="zhuyao"
                  >确定</el-button
                >
                <el-button type="info" plain class="quxiao" @click="prev()"
                  >取消</el-button
                >
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Coolies from "js-cookie";
export default {
  data() {
    return {
      dialogVisible: false,
      fileUpload: null,
      // 所有图片
      imageall: [],
      // 上传的图片路径
      images: {},
      // 64编码
      bianmass: [],
      imageUrl: "",
      dialogVisible: false,
      dialogImageUrl: "",
      disabled: false,

      constants: {},
      shunxu: "",
      caozuo: "",
      img: "",
      isShows: true,
      isfhs: false,
      isBianji: false,
      innTid: "1",
      nPicid: "",
      nOrder: "",
      sPicUrl: "",
    };
  },
  created() {
    this.GetAllpictures();
  },
  methods: {
    // 获取所有图片
    async GetAllpictures() {
      const { data: res } = await this.$http.get(
        "/api/picture/Get_Allpictures",
        {
          params: {
            innTid: 1,
          },
        }
      );
      console.log(res);
      this.imageall = res;
      console.log(this.imageall);
      // this.$refs.img.src = this.images.img
    },
    // 新增图片
    async PostAddpicture() {
      const configImg = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      let formDataImg = new FormData();
      formDataImg.append("file", this.fileUpload.raw);
      const { data: res } = await this.$http.post(
        "/api/SingleImageUpload/Post",
        formDataImg,
        configImg
      );
      console.log(res, "img");
      this.Addpicture();
      // 此时就拿到了你上次图片返回的那个c:\\xxxx那个路径
      // 把这个路径放在下面的spicUrl就行了
    },
    //新增图片接口
    async Addpicture() {
      let formData = new FormData();
      formData.append("nTid", 1);
      formData.append("sPicUrl", this.newFileName);
      formData.append("nOrder", this.shunxu);
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      const { data: res } = await this.$http.post(
        "/api/picture/Post_Addpicture",
        formData,
        config
      );
      console.log(res);
      let arrlunbo = {
        innTid: 1,
        sPicUrl: this.newFileName,
        sPicture: "",
        nOrder: this.shunxu,
      };
      this.imageall.unshift(arrlunbo);
      // this.imageall
      this.$message({
        message: "添加成功",
        type: "success",
      });
      this.isShows = true;
      this.isfhs = false;
    },
    // 图片上传成功的回调
    changeFile(file, fileList) {
      this.fileUpload = file;
    },
    // 编辑图片
    async UpdatePicture() {
      // console.log(this.bianma.bmss);
      let formData = new FormData();
      formData.append("nTid", 1);
      formData.append("nPicid", this.nPicid);
      formData.append("sPicUrl", this.sPicUrl);
      formData.append("nOrder", this.nOrder);
      formData.append("nState", 1);
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      const { data: res } = await this.$http.post(
        "/api/picture/Post_Updatepicture",
        formData,
        config
      );
      this.imageall = res;
      console.log(res);
      this.$message({
        message: "修改成功",
        type: "success",
      });
      this.isShows = true;
      this.isBianji = false;
      this.GetAllpictures();
    },
    // 删除图片
    async deletepicture(row) {
      this.dialogVisible = false;
      this.nPicid = row.nPicid;
      let formData = new FormData();
      formData.append("nPicid", this.nPicid);
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      const { data: res } = await this.$http.post(
        "/api/picture/Post_deletepicture",
        formData,
        config
      );
      console.log(res);
      this.GetAllpictures();
      this.$message({
        type: "success",
        message: "删除成功!",
      });
    },

    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    addlunbo() {
      this.isShows = false;
      this.isfhs = true;
    },
    lunbofanhui() {
      this.isShows = true;
      this.isfhs = false;
      this.isBianji = false;
    },
    prev() {
      this.isShows = true;
      this.isfhs = false;
      this.isBianji = false;
    },
    editor(row) {
      this.sPicUrl = row.sPicUrl;
      this.nOrder = row.nOrder;
      this.nPicid = row.nPicid;
      this.isShows = false;
      this.isBianji = true;
    },
  },
};
</script>

<style scoped lang="css" src="./assets/index.css" />
